<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import UserStatus from "@/components/UserStatus.vue";
import ThemeSwitcher from "@/components/ThemeSwitcher.vue";
import { Document, Edit, View, QuestionFilled } from "@element-plus/icons-vue";

// 菜单栏状态
const activeMenu = ref<string | null>(null);

// 隐藏所有菜单
const hideAllMenus = () => {
  activeMenu.value = null;
};

// 处理菜单项点击
const emit = defineEmits<{
  "menu-item-click": [menu: string, item: string];
}>();

const handleMenuSelect = (index: string) => {
  activeMenu.value = index;
  
  // 根据菜单项触发相应的事件
  switch (index) {
    case "file":
      emit("menu-item-click", "file", "new");
      break;
    case "edit":
      emit("menu-item-click", "edit", "undo");
      break;
    case "view":
      emit("menu-item-click", "view", "refresh");
      break;
    case "help":
      emit("menu-item-click", "help", "about");
      break;
  }
};

// 生命周期钩子
onMounted(() => {
  // 添加全局点击事件监听器来隐藏菜单
  document.addEventListener("click", hideAllMenus);
  document.addEventListener("contextmenu", hideAllMenus);
});

onUnmounted(() => {
  // 清理事件监听器
  document.removeEventListener("click", hideAllMenus);
  document.removeEventListener("contextmenu", hideAllMenus);
});
</script>

<template>
  <div class="menu-bar">
    <el-menu
      mode="horizontal"
      :default-active="activeMenu"
      class="menu-bar-menu"
      @select="handleMenuSelect"
    >
      <!-- 左侧菜单项 -->
      <el-menu-item index="file">
        <el-icon><Document /></el-icon>
        <span>文件</span>
      </el-menu-item>
      <el-menu-item index="edit">
        <el-icon><Edit /></el-icon>
        <span>编辑</span>
      </el-menu-item>
      <el-menu-item index="view">
        <el-icon><View /></el-icon>
        <span>视图</span>
      </el-menu-item>
      <el-menu-item index="help">
        <el-icon><QuestionFilled /></el-icon>
        <span>帮助</span>
      </el-menu-item>
      
      <!-- 右侧菜单项 -->
      <div class="menu-bar__right">
        <!-- 主题切换器 -->
        <div class="menu-bar__theme-switcher">
          <ThemeSwitcher />
        </div>
        <!-- 用户状态显示组件 -->
        <UserStatus />
      </div>
    </el-menu>
  </div>
</template>

<style lang="scss" scoped>
@use "../styles/variables" as *;
@use "../styles/mixins" as *;

.menu-bar {
  width: 100%;
  height: 100%;
}

.menu-bar-menu {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
}

.menu-bar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-bar__theme-switcher {
  display: flex;
  align-items: center;
}

// Element UI 样式覆盖
:deep(.el-menu) {
  background: transparent;
  border: none;
}

:deep(.el-menu-item) {
  color: var(--text-primary);
  border: none;
  
  &:hover {
    background: var(--bg-surface-hover);
  }
  
  &.is-active {
    background: var(--bg-surface-hover);
    color: var(--theme-primary);
  }
}

:deep(.el-menu-item .el-icon) {
  margin-right: 4px;
}

:deep(.el-menu--horizontal) {
  border: none;
}

:deep(.el-menu--horizontal .el-menu-item) {
  border: none;
  height: 60px;
  line-height: 60px;
}

:deep(.el-menu--horizontal .el-menu-item:not(.is-disabled):hover) {
  background: var(--bg-surface-hover);
  color: var(--theme-primary);
}

:deep(.el-menu--horizontal .el-menu-item.is-active) {
  background: var(--bg-surface-hover);
  color: var(--theme-primary);
  border: none;
}
</style>
